<template>
	<div class="one_border" @click="onClick">
		<div class="clearfix" style="margin-right:10px;">
			<div class="item_card_image float-l">
				<img v-lazy="imageUrl">
			</div>
			
			<div class="item_card_name">
				{{goods.title}}
			</div>
			<div class="footer_price">
				<span>{{goods.marketprice | yuan}}</span>
			</div>
		</div>
	</div>
</template>

<script>
	import item_mix from '@/vue/mixin/item-card';
	export default {
		name: "item-card-hori",
		mixins: [item_mix],
    computed: {
      imageUrl() {
        return this.convertImageUrl(this.goods.thumbSquare || this.goods.thumb);
      }
    },

    methods: {
      onClick() {
        this.$emit("click");
      }
    }
	}

</script>

<style lang="scss"scoped>.item_card_image {
  position: relative;
  width: 140px;
  height: 140px;
  text-align: center;

  img {
    display: inline-block;
    height: 100%;
    width: 100%;
  }
}

.item_card_name {
  position: absolute;
  font-size: 10px;
  left: 0;
  bottom: 0;
  color: #fff;
  text-align: center;
  width: 140px;
  background-color: #5bad53;
  opacity: 0.8;
}

.footer_price {
  position: absolute;
  font-size: 10px;
  left: 0;
  top: 0;
  color: #fff;
  text-align: left;
  background-color: #5bad53;
  line-height: initial;
}

</style>
